<template>
    <Dialog modal load-animation cancel-to="/main/normal">
        <template #header>
            <h1 class="header">游戏设置</h1>
        </template>
        <template #content>
            <div class="game-setting">
                <ul>
                    <li>
                        <div class="config">音乐音量</div>
                        <RangeBar class="volume-range" theme="green" :step="1" :default-value="50" height="min(4vw, 42px)"></RangeBar>
                    </li>
                </ul>
            </div>
        </template>
    </Dialog>
</template>

<script lang="ts" setup>
import Dialog from '@/components/ui/dialog.vue';
import RangeBar from '@/components/ui/range-bar.vue';
</script>

<style scoped>
.header {
    font-size: min(42px, 6vh);
}

.game-setting {
    width: 100%;
    height: 100%;
}

ul {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 1vh;
}

ul li {
    padding: 1vh 1vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    border-radius: 1vw;
}

ul li:hover {
    background-color: rgb(128, 128, 128, 0.7);
}

ul li .config {
    font-size: min(4vw, 42px);
    margin-right: 3px;
}

ul li .volume-range {
    flex: 1;
}
</style>